<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
        .base{
            width:650px;
            height:250px;
            background-color: #FF0000;
            border:5px solid black;
        }
        .second{
            width:280px;
            height:220px;
            background-color: aqua;
            float:left;
            border:2px solid black;
            margin:10px;
        }
        .third{
            width:120px;
            height:205px;
            border:2px solid black;
            margin:5px;
            background-color: antiquewhite;
            float:left;
        }
        .forth{
            width:30px;
            height: 170px;
            border:2px solid black;
            float:left;
            margin:10px;
            background-color: coral;
        }
    </style>
</head>
<body>
<h1>aa</h1>
<h2>bb</h2>
<div class="base" id="root">
    <div class="second">
        <div class="third">
            <div class="forth">4_1</div>
            3
            <div class="forth">4_2</div>
        </div>
        2
        <div class="third">
            <div class="forth">4_3</div>
            3
            <div class="forth">4_4</div>
        </div>
    </div>
    1
    <div class="second">
        <div class="third">
            <div class="forth">4_5</div>
            3
            <div class="forth">4_6</div>
        </div>
        2
        <div class="third">
            <div class="forth">4_7</div>
            3
            <div class="forth">4_8</div>
        </div>
    </div>
</div>
<div class="control">
    <input type="button" value="先序遍历" id="preOrder">
    <input type="button" value="中序遍历" id="inOrder">
    <input type="button" value="后序遍历" id="postOrder">
</div>
<script>
    var root    =document.querySelector("#root");
    var btnFst  =document.getElementsByTagName("input")[0];
    var btnSed  =document.getElementsByTagName("input")[1];
    var btnTrd  =document.getElementsByTagName("input")[2];
    var timer   =0;
    // window.onload = function(){
    //     console.log(root,typeof root);
    // }
    //具体执行
    function showNode(node) {
        // alert(node.tagName);
        var color = node.style.backgroundColor;
        setTimeout(function () {
            node.style.backgroundColor="#0000FF";
        },timer+=500);
        setTimeout(function () {
            node.style.backgroundColor=color;
        },timer+=500);
        console.log(node.innerHTML.replace(/[^0-9]/g,""));
    }
    function preOrder(root) {
        // console.log(root);
        if(root){
            showNode(root);
            preOrder(root.children[0]);
            preOrder(root.children[1]);
        }
    }
    function inOrder(root) {
        if(root){
            inOrder(root.children[0]);
            showNode(root);
            inOrder(root.children[1]);
        }
    }
    function postOrder(root) {
        if (root){
            postOrder(root.children[0]);
            postOrder(root.children[1]);
            showNode(root);
        }
    }
    btnFst.addEventListener("click",function () {
        preOrder(root);
        timer=0;
    },false);
    btnSed.addEventListener("click",function () {
        inOrder(root);
        timer=0;
    },false);
    btnTrd.addEventListener("click",function () {
        postOrder(root);
        timer=0;
    },false);
</script>
</body>
</html>